<template>
<div class="wrap">
  <div class="banner">
    <img :src='images[0]'/>
  </div>
  <div class="radius-div">公告</div>
  <div class="flex-wrap">
    <div class="flex-item" v-for="item in application" >
      <img :src='item.image'/>
      <p>{{item.name}}</p>
    </div>
  </div>
  <div class="ads">
    <img :src='images[1]'/>
    <p>182****31231刮出了4枚e金币！</p>
  </div>

  <h2 class="h2">商品推荐</h2>
  
  <div class="goods-list">
    <div class="list">
      <goodItem v-bind:data="images[2]"/>
      <goodItem v-bind:data="images[2]"/>
    </div>
  </div>
</div>
</template>


<script>
import goodItem from '@/components/goodItem'
export default {
  data() {
    return {
      images: [
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552487035708&di=8c45dbd58d9f33998ed871163dbf7ca8&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201812%2F17%2F212119wrssrn7rabrclr6f.jpg",
        "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2568937304,1226715653&fm=26&gp=0.jpg",
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552487087721&di=5176ba91515b07e68622e47118be044b&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F6ce6fcb70b88c0e1c06b65f6809941af94dd4ad9.jpg"
      ],
      application: [
        { image: "/static/images/check_in.png", name: "每日签到" },
        { image: "/static/images/guide.png", name: "新手指南" },
        { image: "/static/images/turn_table.png", name: "幸运转盘" },
        { image: "/static/images/leader_board.png", name: "排行榜" }
      ]
    };
  },

  components: {
    goodItem,
  },

  methods: {},

  created() {}
};
</script>

<style scoped>
.wrap {
  background: "rgba(251,251,251)";
  font-size: 14px;
}
.banner img {
  height: 80px;
}
.radius-div {
  background: rgb(238,238,238);
  margin: 10px 20px;
  padding: 8px 25px;
  border-radius: 20px;
  color: rgb(235,28,11)
}
.flex-wrap {
  display: flex;
}
.flex-item {
  flex: 1;
  text-align: center;
  align-items: center
}
.flex-item img {
  width: 50px;
  height: 50px;
}
.ads img {
  height: 60px;
  margin-top: 10px;
}
.ads p {
  text-align: center;
  color: rgb(91,91,91)
}
h2 {
  font-size: 18px;
  background: rgb(251,251,251);
  color: rgb(130,130,130);
  padding: 12px;
  text-align: center;
}
.goods-list {
  width: 100%;
}
.list {
  display: flex;
  flex-wrap: wrap;
}
</style>
